<template>
  <pixi-template :item="item" :pageId="pageId" :popId="popId">
    <template v-slot:common>
      <canvas ref="pixiCon" class="wb-pixis" :style="styles"></canvas>
    </template>
  </pixi-template>
</template>

<script>
import PixiTemplate from '@/components/games/pixi/pixi-template.vue'
import { INJECT_PIXI_CLASS_NAME } from '@/common/const-inject-class'
import { MOBILE_WID_HEI } from '@/common/const-dif'

export default {
  name: 'WbPixis',
  props: {
    item: Object,
    pageId: {
      type: Number,
      default: -1,
    },
    popId: {
      type: Number,
      default: -1,
    },
  },
  components: {
    PixiTemplate,
  },
  created () {
   if(!this.isH5Edit) {
      let commonAttr = this.commonAttr;
      if(commonAttr.injectJsClass){
        if(INJECT_PIXI_CLASS_NAME[commonAttr.injectJsClass]){
          import(`./js/${commonAttr.injectJsClass}.js`).then((module) => {
            this.injectJsClass = new module.default();
            const container = document.getElementById(this.item.id);
            if(container) {
              this.initPixi(window.PIXI);
            }
          })
        }
      }
    }
  },
  computed: {
    conAttr() {
      return this.item.conAttr;
    },
    commonAttr() {
      return this.item.commonAttr;
    },
    styles() {
      return {
        transform: "rotate(" + this.item.commonAttr.rotate + "deg)",
        opacity: this.item.commonAttr.opacity,
        backgroundColor: this.item.styles.backgroundColor
      };
    }
  },
  mounted(){
    this.initPixi(window.PIXI);
  },
  methods: {
    initPixi(PIXI){
      if (!PIXI || this.pixiApp || !this.injectJsClass) {
        return;
      }
      this.initApp(PIXI);
      this.refreshApp(PIXI);
    },
    refreshApp(){
      this.injectJsClass.initPixi({ item: this.item, PIXI, app: this.pixiApp });
    },
    initApp(PIXI){
      // create a Pixi application css中已经对canvas进行了缩放处理
      let designWidth = this.commonAttr.designWidth;
      let designHeight = this.commonAttr.designHeight;
      let wid = designWidth && designWidth > 0 ? designWidth : this.conAttr.width;
      let hei = designHeight && designHeight > 0 ? designHeight : this.conAttr.height;
      if(this.commonAttr.isFullScreen) {
        wid = MOBILE_WID_HEI.clientWidth*MOBILE_WID_HEI.designScale;
        hei = MOBILE_WID_HEI.clientHeight*MOBILE_WID_HEI.designScale;
      }
      let app = new PIXI.Application({
        view: this.$refs.pixiCon,
        width: wid,
        height: hei,
        transparent: true,
        antialias: true,
        resolution: 1
      });
      // wid = parseInt(wid);
      // hei = parseInt(hei);
      // app.stage.scale.set(1/(app.view.width/initWidth), 1/(app.view.height/initHeight));
      this.pixiApp = app;
      // 如果创建画布后需要更改背景颜色，请将app.renderer对象的backgroundColor属性设置为十六进制颜色值：
      // app.renderer.backgroundColor = 0x061639;
      // 如果您想查看渲染器的宽度或高度，请使用app.renderer.view.width和app.renderer.view.height。
      // 要更改画布的大小，请使用renderer的resize方法，并提供任何新的width和height值。但是，为了确保画布的大小调整到与分辨率匹配，请将autoResize设置为true。
      // app.renderer.autoResize = true;
      // app.renderer.resize(512, 512);
      // 如果您想让canvas画布填充整个窗口，您可以应用下面的CSS样式并将渲染器的大小调整到浏览器窗口的大小。
      // app.renderer.view.style.position = "absolute";
      // app.renderer.view.style.display = "block";
      // app.renderer.autoResize = true;
      // app.renderer.resize(window.innerWidth, window.innerHeight);
    },
  },
  beforeUnmount() {
    if(this.injectJsClass){
      this.injectJsClass.destroy()
      this.item.vueContainer = null
    }
  }
};
</script>
<style>
.wb-pixis {
  width: inherit;
  height: inherit;
}
</style>
